<template>
  <div id="home">
    <!--头部-->
    <Header></Header>

    <main>
      <h2>
        <span class="icon icon-board"></span>
        我的看板
      </h2>
      <ul class="board-items">
        <router-link
          class="board-item"
          v-for="item in boards"
          :key="item.id"
          tag="li"
          :to="{ name: 'Board', params: { id: item.id } }"
        >
          <span class="title">{{ item.name }}</span>
        </router-link>

        <!-- 创建新面板 -->
        <li class="board-item create-new-board">
          <textarea
            class="title form-field-input"
            placeholder="创建新看板"
            v-model.lazy="newBoardName"
            @blur="postBoard"
          ></textarea>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import Header from "@/components/Header/header";
import { mapState } from "vuex";
export default {
  name: "Home",
  components: { Header },

  data() {
    return {
      newBoardName: "",
    };
  },

  methods: {
    postBoard() {
      try {
        if (this.newBoardName.trim() !== "") {
          this.$store.dispatch("board/postBoard", {
            name: this.newBoardName,
          });
        }

        this.newBoardName = "";
        this.$message.success("面板创建成功");
      } catch (error) {
        this.$message.error("面板创建失败");
      }
    },
  },

  computed: {
    ...mapState("board", {
      boards: (state) => state.boards,
      isInitialed: (state) => state.isInitialed,
    }),
  },

  //  页面创建的时候判断一下有没有初始化过
  //  没有的话就去拉取
  created() {
    if (!this.isInitialed) {
      this.$store.dispatch("board/getBoards");
    }
  },
};
</script>
